<template>
	<!-- 店铺商品列表 -->
	<view class="itemBox">
		<view class="imgbox">
			<image :src="child.thum[0].path" mode="aspectFill" class="img"></image>
		</view>
		<view class="skuContent">
			<view class="title lm1" @click="showGoods(child)">{{ child.name }}</view>
			<view class="cr money">
				￥ {{ priceFrom(child.money) }}
				<text class="c9 delMoney" v-if="child.deMoney">￥{{ priceFrom(child.deMoney) }}</text>
			</view>
			<view class="flex jcsb aic bottomTag" v-if="!noBtn">
				<view><u-tag :text="discount(child.money, child.deMoney)" type="warning" plain size="mini" v-if="child.deMoney"></u-tag></view>
				<view class="skutag" v-if="child.shopStyle && child.shopStyle.length" @click="checkSpecs(child)">选规格</view>
				<step :item="child" v-else :key="child.shopNum"></step>
			</view>
		</view>
	</view>
</template>

<script setup>
import step from '../tool/step/step.vue';
import { discount, priceFrom } from '../../utils/tools.js';
import { goodsCounterStore } from '../../stores/shop/goods.js';

defineProps({
	child: {
		type: Object,
		default: {}
	},
	noBtn: {
		type: Boolean,
		default: false
	}
});
const goods = goodsCounterStore();

//商品详情
const showGoods = (item) => {
	goods.goodsStates = true;
	goods.detailData = item;
};
//选择规格弹窗
const checkSpecs = (item) => {
	goods.specsStates = true;
	goods.detailData = item;
};
</script>

<style lang="scss" scoped>
.itemBox {
	display: flex;
	margin: 20rpx;

	.imgbox {
		width: 170rpx;
		height: 170rpx;
		margin-right: 20rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.skuContent {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;

		.title {
			font-weight: bold;
			font-size: $uni-font-size-lg;
		}

		.money {
			font-size: $uni-font-size-base;
			margin-top: 20rpx;

			.delMoney {
				font-size: $uni-font-size-sm;
				text-decoration: line-through;
			}
		}

		.tag {
			border: 1px solid $uni-tag-color;
			border-radius: 10rpx;
			font-size: $uni-border-radius-sm;
			padding: 5rpx 8rpx;
		}

		.skutag {
			display: inline-block;
			width: 80rpx;
			background-color: red;
			color: #fff;
			font-size: $uni-font-size-sm;
			vertical-align: middle;
			padding: 5rpx 8rpx;
		}

		.bottomTag {
			height: 60rpx;
		}
	}
}
</style>
